<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exp-Inlet-Gateway</title>

    <link rel="stylesheet" href="/static/style/main.css">
    <link rel="stylesheet" href="/static/style/page.css">
    <link rel="stylesheet" href="/static/framework/bootstrap.min.css">
    <link rel="stylesheet" href="/static/framework/bootstrap-grid.min.css">

    <script src="/static/framework/bootstrap.bundle.min.js"></script>
    <script src="/static/framework/jquery.min.js"></script>
</head>
<#--  以下JS文件必须在JQuery加载完才能加载  -->
<script src="/static/script/main.js"></script>
<script src="/static/script/page.js"></script>
<#--  以下JS文件必须在JQuery加载完才能加载  -->
<body class="container" style="font-size: 16px;min-width: 1250px">
<nav class="navbar navbar-expand-lg navbar-light container-fluid">
    <div class="container-fluid  bg-light">
        <a href="/static/app/list" class="navbar-brand text-start"
           style="font-family: 微软雅黑,serif; color: #3030ff; font-size: 24px;">Exp-Inlet</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" aria-label="breadcrumb" style="line-height: 1px; text-align: center;align-items: center;">
            <ol class="breadcrumb" style="margin-bottom: 0;">
<#--                <li class="breadcrumb-item"><a href="#">Exp-Inlet</a></li>-->
                <li class="breadcrumb-item active" aria-current="page"><a href="/static/app/list">应用列表</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="#">接口列表</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="/static/SysInfos.html">运行状态</a></li>
            </ol>
        </div>
        <form class="d-flex">

            <input class="form-control w-75 me-2" style="height: 32px;" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" style="width: 80px" type="submit" onclick="$.loginOut()"><a class="" href="javascript:;"><span>退出</span></a></button>
        </form>
    </div>
</nav>
<input type="hidden" id="appName" value="">
<div class="container">
    <small>(部分页面使用了js的go(-1),当看不到最新数据时可以使用CTRL+F5刷新得到最新数据)</small>
    <div class="rightP" style="padding-top:5px;">
        <div id="apiList" class="cont ">
            <a onclick="createAPI()" class="btn btn-primary createBtn">新建API</a>
            <div class="apiGroup">
                <table class="table table-hover" style="margin-bottom: -1px">
                    <thead style="height: 3rem;font-size: 1.0rem;font-weight: bold;">
                    <tr>
                        <th class="fw-bold" width="20%">API名称</th>
                        <th class="fw-bold" width="20%">描述</th>
                        <th class="fw-bold" width="20%">资源(Path)</th>
                        <th class="fw-bold" width="16%">创建时间</th>
                        <th class="fw-bold" width="12%">运行环境</th>
                        <th class="fw-bold" width="12%">查看详情</th>
                    </tr>
                    </thead>
                    <tbody class="api-list-body">
                    <#list context.data as api>
                    <tr>
                        <td><a href="/static/app/get/${api.apiName}">${api.apiName}</a></td>
                        <td>${api.apiDescribe}</td>
                        <td>${api.path}</td>
                        <td>${api.apiCreateTime}</td>
                        <#if api.online?? && api.online>
                            <td><span><a class='scope-formal text-success fw-bold' style='padding-bottom: 4px'>(运行中)</a></span></td>
                        <#else >
                            <td><span><a class='scope-test text-dark' style='padding-bottom: 4px'>未运行</a></span></td>
                        </#if>
                        <td><a href='/static/api/get/${api.apiName}'>查看详情</a></td></tr>
                    <tr>
                        </#list>
                    </tbody>
                </table>
                <div style="position:relative;">
                    <div class="pages">
                        <ul class="page" maxshowpageitem="8" pagelistcount="20" valueCount="0" curPage="1" id="page"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    //获得路径中的参数
    function getURLParam() {
        var url=window.location.href;
        var indexof=url.indexOf("&");
        if(indexof>0){
            url = url.substring(0,indexof);
        }
        var lastIndex=url.lastIndexOf("/");
        var name=url.substring(lastIndex).replace("/","");
        $("#appName").val(decodeURI(name))
    }
    getURLParam();
    function createAPI() {
        window.location.href="/static/api/create/"+$("#appName").val();
    }

    //页面切换
    function flip(curPage) {
        findData(curPage);
    }
    //获得数据
    function findData(curPage) {
        var appName=$("#appName").val();
        var limit=$("#page").attr("pagelistcount");
        var offset = (curPage-1)*limit;
        var data = {
            'name':appName,
            'limit':limit,
            'offset':offset
        };
        $.ajax({
            type: "get",
            url: '/static/findAPI/'+appName,
            async: true,
            data: data,
            dataType: "json",
            success: function (result) {
                if (result.code !== 200) {
                     $.showNotice("ERROR", "获取数据失败!");
                    console.log("获取失败", result);
                    return;
                }
                $(".api-list-body").html('');
                var item = result.data.data;
                for(var i=0;i<item.length;i++){
                    var txt="<tr><td><a href='/static/api/get/"+item[i].apiName+"'>"+item[i].apiName+"</a></td>"
                            +"<td>"+item[i].apiDescribe+"</td>"
                            +"<td>"+item[i].path+"</td>"
                            +"<td>"+item[i].apiCreateTime+"</td>";
                    if(item[i].online == true){
                        txt +="<td><span><a  class='scope-formal text-success fw-bold' style='padding-bottom: 4px'>运行中</a></span></td>";
                    }else{
                        txt +="<td><span><a class='scope-test text-dark' style='padding-bottom: 4px'>未运行</a></span></td>";
                    }
                    txt += "<td><a href='/static/api/get/"+item[i].apiName+"'>查看详情</a></td></tr>";
                    $(".api-list-body").append($(txt));
                }
                flipPage(result.data.dataCount,curPage);
            },
            error: function () {
                 $.showNotice("ERROR", "获取数据失败!");
            }
        });
    }
    //翻页
    function flipPage(valueCount,curPage) {
    	
        $("#page").attr("valueCount", valueCount);//设置数据总行数
        $("#page").attr("curPage",curPage);//设置数据为当前页
       	if(valueCount < parseInt( $("#page").attr('pagelistcount'))){
       		return;
       	}
        $("#page").initPage(valueCount,curPage);
    }
    // flip(1);
</script>
</body>

</html>